<template>
    <div class="mt-16px w-full">
        <CustomCombination :rule-form="ruleForm" />
        <Combination :rule-form="ruleForm" v-if="ruleForm.combinations.length" />
        <CustomizeKeyword :rule-form="ruleForm" />
    </div>
</template>

<script setup lang="ts">
import CustomCombination from './components/CustomCombination.vue'
import CustomizeKeyword from './components/CustomizeKeyword.vue'
import Combination from './components/Combination.vue'
import { getProjectKeywordApi } from '@/api/whiteList/index'
import { useHead } from '@vueuse/head'
import { IFWord, IFreedomWord } from '@/api/geoBasic/types'

const ruleForm = reactive({
    id: 0,
    frontWords: <IFWord[]>[],
    mainWords: [],
    backWords: <string[]>[],
    cusKeyword: '',
    deleteWord: '',
    combination: 0,
    combinations: [],   //自定义组合
    combinationOptions: [],  //多选自定义组合集合
    FMBWords: <string[]>[],
    freedomWords: <IFreedomWord[]>[],
    FreedomWords: <string[]>[],
    checkCombinationOptions:<string[]>[]    //多个组合词选中状态集合
})

async function getProjectKeyword() {
    try {
        const res: ResType = await getProjectKeywordApi()
        if (res.code === 200) {
            ruleForm.combinations = res.gpresetlist || []
            ruleForm.frontWords = res.leftkeydata
            ruleForm.backWords = res.rightkeydata
            ruleForm.mainWords = res.mainkeydata
            ruleForm.deleteWord = res.deletekeydata.join('/')
            ruleForm.cusKeyword = res.data.CusKeyword || ''
            ruleForm.freedomWords = res.freelist || []
            ruleForm.id = res.data.ID || 0

            ruleForm.frontWords.unshift({
                label: '地区',
                list: []
            })

            nextTick(() => {
                if(res.gpresetlist){
                    ruleForm.combinations = res.gpresetlist || []
                }
            })
        }
    } catch (error: any) {
        console.log(error)
    }
}

useHead({
    title: 'GEO：引擎之上，生成万象 - 兴旺宝',
})

onMounted(() => {
    getProjectKeyword()
})


</script>

<style scoped>

</style>